<template>
  <el-button @click="preview">点击报表预览</el-button>
  <el-button plain @click="_PrintInfo=!_PrintInfo;console.log(_PrintInfo)">切换打印信息{{ _PrintInfo }}</el-button>
  <div style="height: 100%" id="updateServiceEcho"></div>
</template>
<script setup>


const reportDesignerId = "updateServiceMain"
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
import {onMounted, ref} from "vue";
import request from "@/utils/request.ts";

let _PrintInfo = ref(false);

const onUpdateDataUrl = "http://localhost:5000/data";
const usePreStore = usePreviewStore();
let spreadSheet;
//初始数据；假定报表设计器是根据这个这个初始数据的表结构设计的，回显可以用这个数据；否则。。。。
let option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
};


onMounted(() => {
  try {
    spreadSheet = XZReport("#updateServiceEcho", option);

  } catch (ex) {
    console.log("....updateServiceEcho....onMounted...ex:", ex);
  }

})
const preview = () => {
  if (usePreStore.getReportDesignerPreviewData(reportDesignerId)) {
    let {config, data} = usePreStore.getReportDesignerPreviewData(reportDesignerId)

    if (data.length > 0) {//有json数据源
      if (_PrintInfo)
        console.log("报表设计器实例sheetDesign.getData()， {config, data}有json数据源：", data);
      spreadSheet.update(config, data);

    } else {//没有json数据源，只有外部数据源

      //spreadSheet = XZReport("#container_indentorEcho", option);
      spreadSheet.update(config);
    }
  } else {
    document.getElementById("container_indentorEcho").innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。
    spreadSheet = XZReport("#updateServiceMain", option);
    // spreadSheet.update(config);
  }
}


const onUpdateData =  (datasets, params) => {

  return new Promise((resolve, reject) => {
    request.get(onUpdateDataUrl).then(res=>{
      console.log("....updateServiceEcho.....datasets:", datasets, "params:", params);
      resolve(res);
    }).catch(err=>{
      reject(err)
    });
  })
}
option.onUpdateData = onUpdateData


</script>

<style scoped>

</style>
